<script>
export default {
  name: 'InspectionPersonSelect',
  props: {
    executors: {
      type: Array,
      default: () => []
    },
    value: undefined,
    row: undefined,
    column: undefined,
    index: undefined
  },
  data() {
    return {
      optionList: [],
      currentValue: ''
    }
  },
  watch: {
    executors: {
      handler() {
        this.optionList = [...this.executors]
      },
      immediate: true
    },
    value: {
      handler(n) {
        this.filterMethod()
        this.currentValue = n
      },
      immediate: true
    }
  },
  methods: {
    // 质检人过滤
    filterMethod(v) {
      if (this.$validateNone(v)) {
        this.optionList = this.executors
      } else if (/^[a-zA-Z]+$/.test(v)) {
        this.optionList = this.executors.filter(e => e.operator.includes(v))
      } else {
        this.optionList = this.executors.filter(e => e.operatorName.includes(v))
      }
    }
  },
  render(h) {
    const options = []
    for (const o of this.optionList) {
      options.push(h('el-option', {
        key: o.operator + this.index,
        props: {
          value: o,
          label: `${o.operatorName}(${o.operator})`
        }
      }))
    }
    return h('el-select', {
      props: {
        placeholder: '请选择质检人',
        valueKey: 'operator',
        filterMethod: this.filterMethod,
        filterable: true,
        clearable: true,
        value: this.currentValue
      },
      style: { width: '100%' },
      on: {
        input: v => {
          this.currentValue = v
          this.$emit('input', v)
        },
        clear: () => {
          this.$emit('clear', this.index)
          this.filterMethod()
        },
        change: v => {
          this.$emit('change', v, this.row, this.column, this.index)
        }
      }
    }, options)
  }
}
</script>
